<template>
  <view class="reserved-form-page">
    <view class="form">
      <view class="form-item">
        <view class="form-item-label">提货人姓名</view>
        <view class="form-item-input">
          <input
            type="text"
            name="name"
            v-model.trim="sForm.name"
            placeholder="请输入"
          />
        </view>
      </view>
      <view class="form-item">
        <view class="form-item-label">手机号</view>
        <view class="form-item-input">
          <input
            type="number"
            name="mobile"
            v-model.trim="sForm.mobile"
            placeholder="请输入"
            :maxlength="11"
          />
        </view>
      </view>
      <view class="form-item" v-if="false">
        <view class="form-item-label">验证码</view>
        <view class="form-item-input form-item-code">
          <input
            type="text"
            name="code"
            v-model.trim="sForm.code"
            placeholder="请输入"
          />
          <view v-if="second > 0" class="code coding">{{ second }}s</view>
          <view v-else class="code" @click="sendCheckCode">{{ codeText }}</view>
        </view>
      </view>
    </view>
    <view class="btns">
      <view class="btn outline" style="margin-right: 24rpx" @click.stop="cancel"
        >取消</view
      >
      <view class="btn primary w422" @click.stop="confirm">确定</view>
    </view>
  </view>
</template>

<script>
import WxValidate from "@/utils/WxValidate";
import requestQTPost from "@/utils/request";
import {mapMutations} from "vuex";
export default {
  data() {
    return {
      sForm: {
        name: "",
        mobile: "",
        code: "",
      },
      codeText: "发送验证码",
      second: 0, //验证码时间
      timer: null,
      WxValidate: null,
    };
  },
  onLoad() {
    const userInfo=uni.getStorageSync('X-UserInfo')
    this.sForm.name= this.$store.state.selectPickUpInfo.name|| userInfo.nickName
    this.sForm.mobile= this.$store.state.selectPickUpInfo.phone|| userInfo.phonenumber
    this.initValidate();
  },
  methods: {
    ...mapMutations(["SELECT_PICK_UP_INFO"]),
    initValidate() {
      const rules = {
        name: { required: true },
        mobile: { required: true, tel: true },
        code: { required: false }
      };
      const message = {
        name: { required: "请输入提货人姓名！" },
        mobile: { required: "请输入手机号！", tel: "请输入正确的手机号！" },
        code: { required: "请输入验证码！" },
      };
      this.WxValidate = new WxValidate(rules, message);
      console.log(this.WxValidate);
    },
    cancel() {
      uni.navigateBack({
        delta: 1,
      });
    },
    sendCheckCode() {
      this.WxValidate.checkForm(this.sForm);
      let errorMsg = this.WxValidate.errorList.find(
        (item) => item.param === "mobile"
      );
      if (errorMsg) {
        uni.showToast({ title: errorMsg.msg, icon: "none" });
        return;
      }
      this.getCheckCode();
      this.handleCountDown();
    },
    confirm() {
      const isValidate = this.WxValidate.checkForm(this.sForm);
      console.log(isValidate, this.WxValidate.errorList, "isValidate~~~");
      if (!isValidate) {
        const errorList = this.WxValidate.errorList;
        uni.showToast({ title: errorList[0].msg, icon: "none" });
        return false;
      }else {
        this.SELECT_PICK_UP_INFO({
          phone:this.sForm.mobile,
          name:this.sForm.name
        });
        uni.navigateBack({
          delta:1
        })
      }
    },
    /**
     * 验证码倒计时
     */
    handleCountDown() {
      if (!this.timer) {
        this.second = 60;
        this.timer = setInterval(() => {
          if (this.second > 0 && this.second <= 60) {
            this.second--;
            if (this.second === 0) {
              this.codeText = "重新获取";
            }
          } else {
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    /**
     * 获取验证码接口
     */
    getCheckCode() {
      requestQTPost("/mobile/api/notice/sms/login", {
        phoneNumber: this.sForm.mobile,
        verifyType: "1",
      })
        .then((res) => {
          console.log("res", res);
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
};
</script>

<style lang="scss">
.reserved-form-page {
  box-sizing: border-box;
  min-height: 100vh;
  background-color: #ffffff;
  .form {
    padding: 0 32rpx;
  }
  .form-item {
    padding-top: 48rpx;
    .form-item-label {
      margin-bottom: 16rpx;
      font-size: 32rpx;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.7);
      line-height: 44rpx;
    }
    .form-item-input {
      display: flex;
      height: 80rpx;
      input {
        flex: 1;
        height: 100%;
        background: #f7f9fa;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        font-size: 32rpx;
        padding: 0 32rpx;
        box-sizing: border-box;
      }
      .code {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        padding: 0 24rpx;
        min-width: 206rpx;
        font-size: 32rpx;
        font-weight: 400;
        color: #ffffff;
        line-height: 32rpx;
        background: #2187ff;
        border-radius: 0rpx 8rpx 8rpx 0rpx;
      }
      &.form-item-code {
        input {
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
        }
        .code {
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
        }
      }
    }
  }
  .btns {
    position: fixed;
    bottom: 0;
    width: 100%;
    left: 0;
    height: 124rpx;
    background: #ffffff;
    border-top: 2rpx solid rgba(0, 0, 0, 0.1);
    display: flex;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    align-items: center;
    justify-content: center;
    z-index: 1;
    .btn {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 240rpx;
      padding: 0 28rpx;
      height: 88rpx;
      border: 0;
      font-size: 28rpx;
      font-family: Alibaba PuHuiTi 2-55 Regular, Alibaba PuHuiTi 20;
      font-weight: 400;
      border-radius: 100px;
      &.outline {
        border: 2rpx solid #b7c1ca;
        color: #777f8f;
      }
      &.icon-service {
        image {
          display: block;
          width: 34rpx;
          height: 34rpx;
          margin-right: 14rpx;
        }
      }
      &.w422 {
        width: 422rpx;
      }
      &.w240 {
        width: 240rpx;
      }
      &.primary {
        background: #2187ff;
        border: 2rpx solid #2187ff;
        color: #fff;
      }
    }
  }
}
</style>
